<template>
  <div ref="pieRef" style="width: 100%; height: 100%" class="piechart" />
</template>

<script>
import * as echarts from 'echarts'
import { mapState } from 'vuex'
import { getThemeValue } from '@/utils/theme_color.js'
import ResizeObserver from 'resize-observer-polyfill'
export default {
  data() {
    return {
      chartInstance: null,
      option: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          itemWidth: 15,
          itemHeight: 15,
          itemGap: 20,
          bottom: '0%',
          tooltip: {
            show: true
          }
        },
        series: [
          {
            name: '接入情况',
            type: 'pie',
            radius: ['35%', '50%'],
            center: ['50%', '40%'],
            label: {
              normal: {
                formatter(e) {
                  const data = e.data
                  if (!data.value && !data.showLabel) {
                    data.labelLine.show = false
                    data.label.show = false
                  } else {
                    return data.name + '\n' + data.value
                  }
                  return data.name + '\n' + data.value
                }
              },
              distanceToLabelLine: -20
            },
            labelLine: {
              length: 5,
              length2: 15,
              emphasis: {
                show: false
              }
            },
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            itemStyle: {
              normal: {
                color: function(colors) {
                  const colorList = [
                    '#6e8bf2',
                    '#ff7d7d',
                    '#ffa74b',
                    '#68cd9f'
                  ]
                  return colorList[colors.dataIndex]
                }
              }}
          }
        ]
      }
    }
  },
  computed: {
    ...mapState({
      sideTheme: (state) => state.settings.sideTheme
    })
  },
  watch: {
    sideTheme: {
      handler(newValue) {
        this.updateChart()
      }
    }
  },
  mounted() {
    this.initChart()
    const resizeOb = new ResizeObserver((entries) => {
      for (const entry of entries) {
        echarts.getInstanceByDom(entry.target)?.resize()
      }
    })
    resizeOb.observe(this.$refs.pieRef)

    // 添加随页面变化而变化
    window.addEventListener('resize', () => {
      this.chartInstance.resize()
    })
  },
  destroyed() {
    window.removeEventListener('resize', () => {
      this.chartInstance.resize()
    })
  },
  methods: {
    initChart() {
      // 初始化对象
      this.chartInstance = echarts.init(this.$refs.pieRef)
      this.chartInstance.setOption(this.option, true)
      window.addEventListener('resize', () => {
        this.chartInstance.resize()
      })
    },
    getData(params) {
      const data = []
      const word = ['系统日志', '消息队列', '数据库', 'HTTP请求']
      const field = ['syslogNum', 'kafkaNum', 'dataNum', 'httpNum']
      for (const key in params) {
        if (key !== 'countNum') {
          const index = field.indexOf(key)
          data.push({ value: params[key], name: word[index], labelLine: { }, label: {}})
        }
      }
      const total = data.reduce((total, item) => {
        // eslint-disable-next-line no-return-assign
        return total += Number(item.value)
      }, 0)
      if (!total) {
        data.forEach((item) => {
          item.showLabel = true
        })
      }
      this.option.series[0].data = data
      this.chartInstance.setOption(this.option, true)
      this.updateChart()
    },
    updateChart() {
      const titleThemeDark = getThemeValue('titleThemeDark')
      const DarkThemeStyle = {
        title: {
          textStyle: {
            color: titleThemeDark.titleColor
          }
        },
        legend: {
          textStyle: {
            color: titleThemeDark.titleColor
          }
        },
        xAxis: {
          axisLabel: {
            color: '#617898'
          },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          axisLabel: {
            color: '#617898'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.15)'
            }
          },
          axisLine: {
            show: false
          }
        }
      }
      const titleThemeHigh = getThemeValue('titleThemeHigh')
      const HighThemeStyle = {
        title: {
          textStyle: {
            color: titleThemeHigh.titleColor
          }
        },
        legend: {
          textStyle: {
            color: titleThemeHigh.titleColor
          }
        },
        xAxis: {
          axisLabel: {
            color: 'rgba(0,0,0,0.45)'
          },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          axisLabel: {
            color: ' rgba(0,0,0,0.45)'
          },
          axisLine: {
            show: false
          }
        }
      }
      if (this.sideTheme == 'theme-dark' || this.sideTheme == 'tech') {
        this.chartInstance.setOption(DarkThemeStyle)
      } else {
        this.chartInstance.setOption(HighThemeStyle)
      }
    }
  }
}
</script>

<style lang="scss" >
.piechart {
  width: 100%;
  height: 100%;
}
</style>
